<ion-header>
  <ion-navbar>
    <ion-title>Card with Maps</ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-card *ngFor="let card of cards" class="adv-map">
    <div class="map-image">
      <img [src]="card.imageUrl">
      <ion-fab right top>
        <button ion-fab class="fab-map pop-in" (click)="seeInMap(card)">
        <ion-icon name='pin'></ion-icon>
      </button>
      </ion-fab>
    </div>
    <ion-item *ngFor="let place of card.places" (click)="placeTapped(place)">
      <ion-icon color="subtle" large item-start [name]='place.icon'></ion-icon>
      <h2>{{place.name}}</h2>
      <p>{{place.address}}</p>
    </ion-item>
    <ion-item actions>
      <span item-start ion-text color="secondary" class="item-bold">{{card.ETA}}</span>
      <span item-start ion-text color="subtle">{{card.distance}}</span>
      <button ion-button color="primary" clear item-end icon-left (click)="getDirections(card)">
      <ion-icon name='navigate'></ion-icon>
      Start
    </button>
    </ion-item>
  </ion-card>
</ion-content>
